<template>
  <div class="main">
    <div class="back">
      <el-button type="primary" icon="el-icon-back" circle></el-button>
    </div>

    <myHeader />
    <div class="choice_problem_content">
      <div class="previous_page">
        <el-button icon="el-icon-back" circle></el-button>
      </div>
      <div class="choice_problem_content_show">
        <div class="choice_problem_content_problem_show">
          <div class="choice_problem_content_problem_show_list">
            {{ choiceProblems[0].problemName }}
          </div>
          <div class="choice_problem_content_problem_show_content">
            {{choiceProblems[0].title}}
          </div>
        </div>
        <div class="choice_problem_content_show_answers">
          <el-form-item>
            <el-radio-group v-model="isMedicare">
              <el-radio v-for="item in isMedicareList" :key="item.Id" :label=item.Id>{{item.Title}}. {{item.Name}}}</el-radio>
            </el-radio-group>
          </el-form-item>
          <answer
              v-for="(title, content) in answers"
              v-bind:title="title"
              v-bind:content="content"
              v-bind:key="title.id"

          />
        </div>
        <div class="submit_show">
          <el-button size="medium" type="primary">提交</el-button>
        </div>
      </div>
      <div class="next_page">
        <el-button icon="el-icon-arrow-right" circle></el-button>
      </div>
    </div>
    <div class="choice_problem_list">
      <div class="choice_problem_list_show">
        <div
            class="choice_problem_list_id"
            v-for="id in choiceProblems"
            v-bind:id="id"
            v-bind:key="id.id"
        >
          {{ id.id }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import answer from "@/components/answer.vue";

export default {
  components: {
    answer,
  },
  data() {
    return {
      isMedicare: '',
      isMedicareList: [],
      choiceProblemTitle: "test00",
      answers: [
        {
          title: "A",
          content: "123",
        },
        {
          title: "B",
          content: "456",
        },
        {
          title: "C",
          content: "456",
        },
        {
          title: "D",
          content: "456",
        },
      ],
      choiceProblems: [
        {
          id: 1,
          problemName: "test0",
          title: "123",
        },
      ],
    };
  },
  mounted() {
    var that = this
    let routerParams = this.$route.query.data;
    routerParams = this.qs.parse(routerParams);
    this.$axios({
      method: "GET",
      url: "http://81.70.192.34:8088/problem/searchChoice?problem_id="+routerParams.problemId,
    }).then(res => {
      var list = res.data.data
      that.choiceProblems = list
      var answersList = list[0].answers
      for (let i = 0; i < answersList; i++) {
        var Title =null;
        switch (answersList[i]) {
          case 1:
            Title = 'A'
            break
          case 2:
            Title = 'B'
            break
          case 3:
            Title = 'C'
            break
          case 4:
            Title = 'D'
            break
        }
        that.isMedicareList.push(
            {
              Id: answersList[i].id,
              Title: Title,
              Name: answersList[i].answerContent,

            }
        )
      }
      console.log(this.user)
    }).catch((error) => {
      console.error(error);
    });
    console.log(routerParams);

  },
};
</script>

<style scoped>
.main {
  height: 90vh;
  width: 97vw;
  margin-top: 3vh;
  margin-left: 1vw;
  display: flex;
  flex-wrap: wrap;
}
.choice_problem_content {
  margin-top: 1vh;
  margin-left: 1vw;
  height: 85vh;
  width: 68vw;
  display: flex;
  flex-wrap: wrap;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}
.previous_page {
  margin-left: 1vw;
  height: 75vh;
  width: 3vw;
  line-height: 75vh;
}
.next_page {
  height: 75vh;
  width: 3vw;
  line-height: 75vh;
}
.choice_problem_list {
  margin-top: 1vh;
  height: 85vh;
  width: 20vw;
  margin-left: 3vw;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}
.choice_problem_content_problem_show {
  height: 50vh;
  width: 60vw;
  margin-top: 5vh;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}
.choice_problem_content_problem_show_list{
  font-size: 30px;
  text-align: center;
  line-height: 10vh;
  height: 10vh;
  border-bottom: 1px solid #e6e6e6;
}
.choice_problem_content_show_answers {
  height: 12vh;
  width: 60vw;
  margin-top: 5vh;
  display: flex;
  flex-wrap: wrap;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}
.choice_problem_list_id {
  height: 4vh;
  width: 2vw;
  line-height: 4vh;
  margin-top: 2vh;
  margin-left: 1vw;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  text-align: center;
}
.choice_problem_list_show {
  height: 65vh;
  width: 20vw;
  display: flex;
  flex-wrap: wrap;
}
.submit_show {
  height: 20vh;
  width: 20vw;
  line-height: 20vh;
  text-align: center;
  margin-left: 20vw;
}
.back{
  margin-top: 1vh;
  margin-left: 1vw;
}
</style>